<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise封装</title>
</head>

<body>
  <script>
    // 接口地址: https://api.apiopen.top/getJoke

    if (false) {
      // 1.先new一个XMLHttpRequest对象进行请求
      const xhr = new XMLHttpRequest();
      // 2.编写请求方式与请求地址
      xhr.open("GET", "https://api.apiopen.top/getJoke");
      // 3.发送请求
      xhr.send();
      // 4.监听请求响应
      xhr.onreadystatechange = function () {
        // 如果状态为4代表请求响应返回了
        if (xhr.readyState === 4) {
          // 判断响应状态码 200-299
          if (xhr.status >= 200 && xhr.status < 300) {
            // 表示请求成功 
            console.log(xhr.response);
          } else {
            // 表示请求失败
            console.error("请求响应失败");
          }
        }
      }
    }


    // 使用Promise封装
    const promise = new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", "https://api.apiopen.top/getJoke");
      // 错误示范
      // xhr.open("GET", "https://api.apiopen.top/getJokess");
      xhr.send();
      xhr.onreadystatechange = function () {
        // 如果状态为4代表请求响应返回了
        if (xhr.readyState === 4) {
          // 判断响应状态码 200-299
          if (xhr.status >= 200 && xhr.status < 300) {
            // 表示请求成功 
            resolve(xhr.response);
          } else {
            // 表示请求失败
            reject("请求失败啦");
          }
        }
      }
    })
    // 处理成功与失败的回调
    promise
      .then((result) => {
        console.log("成功", result);
      })
      .catch((error) => {
        console.log("失败", error);
      })
  </script>
</body>

</html>